<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收货地址</title>
    <script src="../../js/flexible.js"></script>
    <script src="../../js/jquery-1.12.3.min.js"></script>
    <link rel="stylesheet" href="../../css/zyj/shouhuodizhi.css">
    <link rel="stylesheet" href="../../css/common/header-footer.css">
    <link rel="stylesheet" href="../../css/common/base.css">
</head>
<body>
    <header>
        <div class="header_top">
            <img src="../../img/信号组.png" alt="">
            <span class="header_time">上午 9:51</span>
            <span class="ht_right">
                <img src="../../img/蓝牙图标.png" alt="">
                <img src="../../img/电量百分比.png" alt="">
                <img src="../../img/电量图标.png" alt="">
            </span>
        </div>
        <div class="header_bottom">
            <div class="hb_left">
                <img src="../../img/返回按钮-1.png" alt="">
                <!-- 需要更改title文字 -->
                <span class="title"><a href="../../html/zyj/faburenwu.html">发布任务</a></span>
            </div>
            <div class="hb_right">
                <img src="../../img/组 -1.png" alt="">
            </div>
        </div>
    </header>
    <div class="top">
        <div class="top_xinjian">
            <span id="xinjian_plus">+ 添加新地址</span>
    </div>       
    <div class="default">
        <span>默认地址</span>
    </div>
    </div>    
    <div class="adr_box">
        <div class="info">
            <span>王小明</span>
            <span>19100000000</span>
        </div>
        <div class="adr">
            <span>
                四川省成都市郫都区西华大学德馨苑0栋
            </span>
        </div>
        <div class="choose_default">
            <div class="rad">
                <input type="checkbox" name="" id="btn_1" class="btn_input">
                <label for="btn_1" class="btn_label"></label>
            </div>
            <div class="btn">
                <button id="xinjian_plus2" class="bianji">编辑</button>
                <a href="../../html/zyj/faburenwu.html" class="a1">
                    <button class="a1_sure">确认</button>
                </a>
            </div>
        </div>
    </div>
    <div class="default">
        <span>地址1</span>
    </div>
    </div>    
    <div class="adr_box">
        <div class="info">
            <span>李小红</span>
            <span>19199999999</span>
        </div>
        <div class="adr">
            <span>
                四川省成都市郫都区西华大学德馨苑德馨苑德
                馨苑德馨苑德馨苑德馨苑0栋
            </span>
        </div>
        <div class="choose_default">
            <div class="rad">
                <input type="radio" name="" id="">
                <span>设为默认地址</span>
            </div>
            <div class="btn">
                <button id="xinjian_plus3" class="bianji">编辑</button>
                <a href="../../html/zyj/faburenwu.html" class="a1">
                    <button class="a1_sure">确认</button>
                </a>
            </div>
        </div>
    </div>
    <div class="zz" id="xinjian_s" style="display: none;">
        <header>
            <div class="header_top">
                <img src="../../img/信号组.png" alt="">
                <span class="header_time">上午 9:51</span>
                <span class="ht_right">
                    <img src="../../img/蓝牙图标.png" alt="">
                    <img src="../../img/电量百分比.png" alt="">
                    <img src="../../img/电量图标.png" alt="">
                </span>
            </div>
            <div class="header_bottom">
                <div class="hb_left">
                    <img src="../../img/返回按钮-1.png" alt="">
                    <!-- 需要更改title文字 -->
                    <span class="title"><a href="../../html/zyj/shouhuodizhi.html">发布任务</a></span>
                </div>
                <div class="hb_right">
                    <img src="../../img/组 35.png" alt="">
                </div>
            </div>
        </header>
        <div class="xinjian_box">
            <span>新建地址</span>
            <div class="info">
                <div class="name">
                    <input type="text" class="name_input">
                    <span>姓名</span>
                    <span>手机号码</span>
                </div>
                <div class="info_dizhi">
                    <input type="text" class="name_input">
                    <span>详细地址</span>
                </div>
                <div class="xinjian_btn">
                    <input type="checkbox" name="" id="zz_btn" class="btn_xinjian">
                    <label for="zz_btn" class="xinjian_label"></label>
                </div>
            </div>
            <button id="sure">确认</button>
        </div>
    </div>
</body>
<script>
    // 通过id查找html上的元素
    var  xinjian_plus = document.getElementById("xinjian_plus")
    var  xinjian_plus2 = document.getElementById("xinjian_plus2")
    var  xinjian_plus3 = document.getElementById("xinjian_plus3")
    var xinjian_s = document.getElementById("xinjian_s")
    var sure = document.getElementById("sure")
    // /给他添加响应事件
    xinjian_plus.addEventListener("click", function(){
        xinjian_s.style.display = "block"
    })
    xinjian_plus2.addEventListener("click", function(){
        xinjian_s.style.display = "block"
    })

    xinjian_plus3.addEventListener("click", function(){
        xinjian_s.style.display = "block"
    })

    sure.addEventListener("click", function(){
        xinjian_s.style.display = "none"
    })
</script>
</html>